<template>
	<div>
		<div class="breadcrumb">
			<!-- <span @click="$router.back()">〈  返回上一页</span> -->
			 <el-button @click="$router.back()" icon="el-icon-arrow-left" type="text">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">基地基本信息</div>
			</div>
			<formTemplate :formSet="formSet1" :postData="formData1" :optionData="optionData">
				<template slot="baseLocation" slot-scope="scope">
					<el-form-item label="基地位置：" >
						<el-input v-model="formData1.baseLocation" style="width:500px" disabled>
							 <img slot="suffix" src="@/assets/image/digitalOrchard/dingwei.png" alt="" class="locationBtn" @click="checkMap"/>
						</el-input>
					</el-form-item>
				</template>
				<template slot="area" slot-scope="scope" >
					<div style="display:flex;justify-content: start">
						<el-form-item label="基地面积：" style="width:300px" label-width="107px">
							<el-input v-model="formData1.area" style="width:200px" :disabled="true">
								<template slot="append">亩</template>
							</el-input>
                    	</el-form-item>
						<el-form-item label="圈定面积：" style="width:260px" label-width="107px">
							<el-input v-model="formData1.fixedArea" style="width:200px" :disabled="true" placeholder="请编辑基地">
								<template slot="append">亩</template>
							</el-input>
                    	</el-form-item>
						<!-- <el-button style="width:60px;height:32px;margin-left:40px" type="primary" @click="selectMap" :disabled="isDetail">圈定</el-button> -->
					</div>
				</template>
			</formTemplate>
			<div style="clear:both"></div>
			<!-- 地图 -->
			<div class="mapBox">
				<!-- <BIGENAP ref="BIGENAP" id="equip" :configs="mapConfig" :baseId="formData1.baseId"></BIGENAP> -->
				<mars3d ref="mars3ds" :baseId="cacheId" ></mars3d>
			</div>
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">供应商搜索</div>
			</div>
			<formTemplate :formSet="formSet3" :postData="formData1" :optionData="optionData">
				<template slot="companyArea" slot-scope="scope" >
					<el-form-item label="公司区域：" label-width="107px">
						<div style="width:500px;padding-left:7px">
							<addressD :value='formData1.baseKeyValue' :disabled="isDetail" :multiple='true' @getAddressData="getAddressData" ></addressD>
						</div>
						<!-- <el-input v-model="formData1.baseLocation" style="width:500px" :disabled="isDetail"></el-input> -->
					</el-form-item>
				</template>
			</formTemplate>
			<!-- <formTemplate :formSet="formSet2" :postData="formData2" :optionData="optionData">
				<template slot="supplierId" slot-scope="scope">
					<el-form-item label="供应商：">
						<el-select
  						  	v-model="formData2.supplierId"
  						  	filterable
  						  	remote
  						  	reserve-keyword
  						  	placeholder="请输入公司名称"
  						  	:remote-method="getCompaniesByKey"
  						  	:loading="loading"
							style="width:500px"
							@change="handleChange">
  						  	<el-option
  						  	  v-for="(item,index) in optionData.supplierId"
  						  	  :key="index"
  						  	  :label="item.name"
  						  	  :value="item.value">
  						  	</el-option>
  						</el-select>
					</el-form-item>
            	</template>
			</formTemplate>
			<div style="clear:both"></div> -->

			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">需求列表</div>
			</div>
			<template v-if="checkList.length != 0" >
				<div class="checkBox" v-for="(item,index) in checkList" :key="index">
					<span style="margin-right:10px">{{item.label}}：</span>
					<el-checkbox-group v-model="formData2.serviceId">
            	    	<el-checkbox v-for="(val,index) in item.data" :key="index" :label="val.serviceValue" ></el-checkbox>
            		</el-checkbox-group>
				</div>
			</template>
			<template v-else-if="noData">
				<div class="no_data">暂无数据</div>
			</template>
			<div class="menberConTitle flex" style="justify-content: space-between; margin-top:10px">
				<div class="tableTitle">服务公司列表</div>
			</div>
			<tableForm :addNew="false" :pageData="formData1" :data="tableData" >
				</tableForm>
			<div style="clear:both"></div>
		</div>
		
		<div class="btnBox">
			<el-button type="primary" round @click="submitData">保存</el-button>
			<!-- <el-button type="danger" round>删除</el-button> -->
		</div>
	</div>
</template>

<script>
    import formTemplate from '@/components/form.vue'
	import tableForm from '@/components/tableForm.vue'
	import BIGENAP from '../../components/Map.vue'
	import addressD from '@/components/address.vue'
	export default {
		components: {
            formTemplate,
			BIGENAP,
			addressD,
			tableForm
		},
		data() {
			return {
				noData:false,
				isDetail:false,
				mapConfig:{
					isOpenEditor: false, // 是否打开编辑
					isShowEditorBtn: false,
					maxZoom: '',
					mapUrl: ''
				},
				checkList:[],
				res:{
					data:[]
				},
                formSet1:[
                    { span: 14, label: '基地名称：', prop: 'baseId', type: 'select', noData:"请先创建基地" },
                    { span: 14, label: '基地位置：', prop: 'baseLocation', type: 'slot' },
                    { span: 12, label: '基地面积：', prop: 'area', type: 'slot', width: '70%',labelWidth:'530px' },
					// { span: 7, label: '线条颜色：', prop: 'colorRail', type: 'colorPicker' ,labelWidth:'520px'},
                ],
				formSet2:[
                    { span: 14, label: '供应商：', prop: 'supplierId', type: 'slot' },
                    { span: 14, label: '负责人：', prop: 'createUserName', type: 'input', disabled:true },
                ],
				formSet3:[
                    // { span: 14, label: '数字装备：', prop: 'equip', type: 'cascader', style: 'width:114%'},
                    { span: 14, label: '公司区域：', prop: 'companyArea', type: 'slot' },
                ],
				tableData:[
					{type:'check'},
					{type:'index'},
                    {type:'text',prop:'a',label:'公司名称'},
                    {type:'text',prop:'b',label:'负责人'},
                    {type:'text',prop:'c',label:'服务列表'},
                    {type:'text',prop:'d',label:'服务区域'},
                ],
				optionData:{
					baseId:[],
					supplierId:[],
				},
                formData1:{
					items:[
						{ a:'重庆三峡农夫科技有限公司' , b:'刘功成', c:'三维建模，360全景，智能施肥，生长监控，果园安防，智能高压', d:'重庆市/云阳县，四川省/宜宾市'}
					]
				},
				formData2:{
					serviceId:[]
				},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: '',
				cacheId:'',
				mistiming: '0', // 所选时间的差值
				uploadLoading: false,
				postData: {
				},
				loading:false,
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
			this.getQueryList()
			this.getSupplierServicesByCompanyId()
		},
		mounted() {
		},
		watch: {
			'formData1.baseId'(e){
				console.log(this.formData1);
				this.optionData.baseId.forEach(item =>{
					if(item.value == this.formData1.baseId){
						this.formData1.baseLocation = item.baseLocation
						this.formData1.lat = item.lat
						this.formData1.lng = item.lng
						this.formData1.area = item.area
						this.formData1.fixedArea = item.fixedArea
					}
				})
			}
		},
		methods: {
			getAddressData(){

			},
			checkMap(){
				// 飞图---------到指定位置
				/**
				 * @param {latLng}  坐标 object {lat: 28.92163128242129, lng: 111.70898437500001} or Arry[28.92163128242129,111.70898437500001].
				 * @param {zoom}  显示级别 number
				 */
				
				console.log(this.formData1);
				this.$refs.BIGENAP.flyingFigure({lat: this.formData1.lat, lng: this.formData1.lng}, 15)
			},
			getSupplierServicesByCompanyId(e){
				this.$request.get(this.$api.getServiceList).then(res=>{
					if(res.code == 200){
						this.res.data = res.data
					}
					if(this.res.data.length>0){
							this.noData = false
							this.res.data.forEach(item =>{
								this.checkList.push({label:item.typeName,data:item.serviceListEntity})
							})
						}else{
							this.checkList = []
							this.noData = true
						}
				})
			},
			getCompaniesByKey(e){
				this.$request.postForm(this.$api.getCompaniesByKey, {
					keyWord:e
				}).then(res=>{
					if(res.code == 200){
						this.optionData.supplierId = res.data.map(item =>{
							return{
								name:item.supplierName,
								value:item.supplierId,
								contactsId:item.createUserId,
								createUserName:item.createUserName
							}
						})
					}
				})
			},
			handleChange(e){
				console.log(this.optionData.supplierId);
				this.optionData.supplierId.forEach(item =>{
					if(item.value == e){
						this.formData2.createUserName = item.createUserName
						this.formData2.contactsId = item.contactsId
						this.getSupplierServicesByCompanyId(item.value)
					}
				})
				console.log(this.formData2);
			},
			getQueryList(){
				if(this.companyId){
					this.$request.postForm(this.$api.queryList, {
						companyId: this.companyId,
						page:this.page,
						pageSize:this.pageSize
					}).then(res=>{
						if(res.code == 200){
							this.optionData.baseId = res.data.items.map(item =>{
								return{
									name:item.baseName,
									value:item.id,
									baseLocation:item.baseLocation,
									lat:item.latitude,
									lng:item.longitude,
									fixedArea:item.fixedArea,
									area:item.area
								}
							})
						}
					})
				}
			},
			submitData() {
				// 保存/修改
				this.postData = Object.assign(this.formData1,this.formData2)
				console.log(this.postData);
				if(!this.postData.area){
					this.$message.error('请填写基地面积')
					return
				} else if (!this.postData.colorRail) {
					// this.$message.error('请选择线条颜色')
					this.postData.colorRail = '#23B14D'
					// return
				} else
					if (this.postData.serviceId.length == 0) {
					this.$message.error('没有供应商服务无法提交')
					return
				}
				this.postData.companyId = this.companyId
				this.$request.postForm(this.$api.addDigitalEquipment, this.postData).then(res=>{
					if(res.code == 200){
						this.$message.success('保存成功')
						this.$router.back()
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.breadcrumb >>>span{
		color: #23B14D;
		cursor: pointer;
	}

	.no_data{
		padding: 0 40px;
		color:#909399
	}

	.checkBox{
		display: flex;
		justify-content: flex-start;
		padding: 10px 0 18px 20px;
		
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.demo-form-inline {
		color: #5C5C5C;
	}

	.formInput {
		width: 500px;
	}

	.formInputNub {
		width: 100px;
		margin-right: 10px;
	}

	.formInputDatePicker {
		width: 440px;
		margin-right: 10px;
	}

	.fileListName {
		width: 500px;
		padding: 0 30px 0 10px;
		position: relative;
		border: 1px solid #DCDCDC;
		margin-bottom: 15px;
		align-items: center;
		color: #5C5C5C;
		border-radius: 5px;
	}

	.fileListNameIcon {
		position: absolute;
		right: 10px;
		cursor: pointer;
		top: 10px;
	}

	.fileListNameIcon:hover,
	.dayNub {
		color: #23B14D;
	}

	.dayNub {
		margin: 0 5px;
	}

	.btnBox {
		width: 100%;
		margin-top: 30px;
		padding: 30px 0;
		border-top: 1px solid #DCDCDC;
		text-align: center;
	}

	.btnBox button {
		width: 100px;
	}
	.expertTag{
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.mapBox{
		/* width: 100%; */
		width: calc(100% - 20px);
		height: 100%;
		margin: 20px 0 20px 10px;
		/* margin-bottom: 30px; */
	}
	.locationBtn{
		width: 18px;height: 18px;position: relative;top: 7px;cursor: pointer;
	}
</style>
